import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import service from '../../api/index'
import './Rempro.scss'
import { InfiniteScroll, DotLoading, Ellipsis } from 'antd-mobile'
// import { ListItem } from 'antd-mobile/es/components/list/list-item';

interface State {
    rempros: any
    count: number
    hasMore: boolean
}

interface Rempro {
    props: any
    state: State
    scrolltop: any
}
class Rempro extends Component<any> {
    constructor(props: any) {
        super(props)
        this.scrolltop = React.createRef()
        this.state = {
            rempros: [],
            count: 0,
            hasMore: true
        }
        // console.log(this.props.count)
    }
    async componentDidMount() {

        
        service.pro.getRempros({ count: this.state.count, limitNum: 12 }).then(res => {
            // console.log(res)
            this.setState({
                rempros: res.data.data
            })
        });
    }
    // shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): boolean {
    //     // console.log(this.props, nextProps)
    //     if (this.props.count !== nextProps.count) {
    //         var count = nextProps.count
    //         service.pro.getPros({ count, limitNum: 12 }).then(res => {
    //             // console.log(res)
    //             this.setState({
    //                 rempros: res.data.data,
    //                 count
    //             })
    //         });
    //     }
    //     return this.props.count === nextProps.count
    // }
    async loadMore() {
        // console.log(this.props.count)
        let res = await service.pro.getPros({ count: this.state.count + 1, limitNum: 12 })
        if (res.data.data.length === 0) {
            this.setState({
                hasMore: false
            })
        }
        else {
            var count = this.state.count + 1
            this.setState({
                hasMore: true,
                rempros: [...this.state.rempros, ...res.data.data],
                count
            })
        }
    }
    toDetails(proid: string) {
        this.props.history.push("/details/" + proid)
    }
    render() {
        return (<>
            <div className='rempros'  >
                {
                    this.state.rempros.map((item: any, index: number) => {
                        return (
                            <div className='rempro' key={index} onClick={() => { this.toDetails(item.proid) }}>
                                <img src={item.img1} alt="" />
                                <Ellipsis direction='end' rows={2} content={item.proname} />
                                <span>￥<strong>{Math.ceil(item.originprice * item.discount / 10)}</strong></span>
                            </div>
                        )
                    })
                }
            </div>
            <InfiniteScroll threshold={100} loadMore={async () => { await this.loadMore() }} hasMore={this.state.hasMore}>
                {
                    <>
                        {this.state.hasMore ? (
                            <>
                                <span>Loading</span>
                                <DotLoading />
                            </>
                        ) : (
                            <span>--- 我是有底线的 ---</span>
                        )}
                    </>
                }
            </InfiniteScroll>
        </>

        );
    }
}

export default withRouter(Rempro);